<script setup lang="ts">
  import TmCell from 'tm/basic/cell';
  import TmTab from 'tm/basic/tab';
  import TmTabs from 'tm/basic/tabs';
  import TmTextEllipsis from 'tm/basic/text-ellipsis';
  import TmPopupSearch from 'tm/bussiness/popup-search';
  import { ref } from 'vue';
  import { useTranslate } from '../../utils';

  const t = useTranslate({
    'zh-CN': {
      basic: '基本用法',
      debugging: '联调',
    },
    'en-US': {
      basic: 'Basic',
      debugging: 'Debugging',
    },
  });

  const onClickItem = (item, index) => {
    // alert(index);
    console.log('onClickItem', item, index);
  };

  const list = ref([
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
      historyArray: ['A', 'B'],
    },
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
    },
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
    },
  ]);

  const onLoad = (index: number, val: string) => {
    console.log(`onLoad:${val}`);
    debugger;
    const currentList = list.value[index];
    currentList.loading = true;

    console.log('aaaaaaaaaaaaaaaaaaa');

    setTimeout(() => {
      // debugger;
      if (currentList.refreshing) {
        currentList.items = [];
        currentList.refreshing = false;
      }

      for (let i = 0; i < 10; i++) {
        const text = currentList.items.length + 1;
        // currentList.items.push(text < 10 ? '0' + text : String(text));
        currentList.items.push({
          title: `title_${i}`,
          thumb:
            'https://camo.githubusercontent.com/3f50c01f4ac4cce54ef4c19f0c961a1366ad573224bd6d986de120a3b496d92c/68747470733a2f2f63646e2e7175617361722e6465762f73706f6e736f72732f6d696f2d61622e737667',
          na1: '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
          co1: text,
        });
      }

      currentList.loading = false;
      currentList.refreshing = false;

      // show error info in second demo
      if (
        index === 1 &&
        currentList.items.length === 10 &&
        !currentList.error
      ) {
        currentList.error = true;
      } else {
        currentList.error = false;
      }

      if (currentList.items.length >= 40) {
        currentList.finished = true;
      }

      console.log('bbbbbb', currentList);
    }, 1000);
  };

  const onRefresh = (index: number, val: string) => {
    console.log(`onRefresh:${val}`);
    list.value[index].finished = false;
    // list.value[index].loading = true;
    onLoad(index, val);
  };

  const onClear = (index: number) => {
    list.value[index].items = [];
  };

  const itemTemplateGeneral = [
    {
      type: 'title',
      valueType: 'field',
      field: 'title',
      expression: '',
      ellipsis: false,
      demo: '',
    },
    {
      type: 'thumb',
      valueType: 'expression',
      field: '',
      expression: '${thumb}',
      ellipsis: false,
      demo: '',
    },
    {
      type: 'info',
      valueType: 'field',
      field: 'na1',
      expression: '',
      ellipsis: true,
      demo: '',
    },
    {
      type: 'info',
      valueType: 'expression',
      field: '',
      expression: '${na1} -- ${co1}',
      ellipsis: false,
      demo: '',
    },
  ];
  const l = {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  };
</script>

<template>
  <div>
    <tm-tabs>
      <tm-tab :title="t('basicUsage')">
        <tm-cell title="插槽">
          <template #value>
            <TmPopupSearch
              :loading="list[0].loading"
              :finished="list[0].finished"
              historyKey="na1"
              v-model:refreshing="list[0].refreshing"
              :finished-text="t('finishedText')"
              @load="val => onLoad(0, val)"
              @refresh="val => onRefresh(0, val)"
              :rows="list[0].items"
              @clickItem="onClickItem"
              @clear="onClear(0)"
              :historyArray="list[0].historyArray"
              @updateHistory="
                history => {
                  console.log('updateHistory', history);
                  list[0].historyArray = history;
                }
              "
            >
              <template v-slot="row">
                <tm-cell :title="key" v-for="(val, key) in row">
                  <template #value>
                    <TmTextEllipsis
                      rows="1"
                      dots=""
                      expand-text="展开"
                      collapse-text="收起"
                      :content="val"
                    ></TmTextEllipsis>
                  </template>
                </tm-cell>
                <!-- {Object.keys(row).map((key) => (
                <tm-cell :title="row[key]" />
                ))} -->
                <!-- <tm-cell :title="item1 + '1'" />
                <tm-cell :title="item1 + '1'" />
                <tm-cell :title="item1 + '1'" /> -->
              </template>

              <template #empty>
                <div>自定义空模板</div>
              </template>
            </TmPopupSearch>
          </template>
        </tm-cell>

        <tm-cell title="预制">
          <template #value>
            <TmPopupSearch
              :itemTemplateGeneral="itemTemplateGeneral"
              :loading="list[1].loading"
              :finished="list[1].finished"
              v-model:refreshing="list[1].refreshing"
              :finished-text="t('finishedText')"
              @load="val => onLoad(1, val)"
              @refresh="val => onRefresh(1, val)"
              :rows="list[1].items"
              @clickItem="onClickItem"
            >
            </TmPopupSearch>
          </template>
        </tm-cell>
      </tm-tab>
      <tm-tab :title="t('debugging')">
        <tm-cell title="插槽">
          <template #value>
            <TmPopupSearch
              :loading="l.loading"
              :finished="l.finished"
              v-model:refreshing="l.refreshing"
              :finished-text="t('finishedText')"
              @load="val => onLoad(0, val)"
              @refresh="val => onRefresh(0, val)"
              :rows="l.items"
              @clickItem="onClickItem"
            >
              <template v-slot="row">
                <div>{{ row }}</div>
              </template>
            </TmPopupSearch>
          </template>
        </tm-cell>

        <tm-cell title="预制">
          <template #value>
            <TmPopupSearch
              :loading="list[1].loading"
              :finished="list[1].finished"
              v-model:refreshing="list[1].refreshing"
              :finished-text="t('finishedText')"
              @load="val => onLoad(1, val)"
              @refresh="val => onRefresh(1, val)"
              :rows="list[1].items"
              @clickItem="onClickItem"
            >
            </TmPopupSearch>
          </template>
        </tm-cell>

        <tm-cell title="加载异常">
          <template #value>
            <TmPopupSearch :error="true" error-text="异常了"> </TmPopupSearch>
          </template>
        </tm-cell>
      </tm-tab>
    </tm-tabs>
  </div>
</template>

<style lang="less"></style>
